<template>
  <div class="w-100% h-100% overflow-auto bg-#DCDCDC p-20rpx ">
    <div class="flex flex-wrap gap-20rpx w-100% pl-20rpx">
      <div
        @click="goPage(item)"
        v-for="(item,index) in list"
        :key="index"
        class="w-320rpx h-200rpx bg-#fff border-rd-12rpx color-#2e2d3f flex justify-center items-center"
      >
        {{ item.name }}
      </div>
    </div>
    <div>
      <div @click="changeShow">
        测试echarts显示隐藏{{ isShow }}
      </div>
      <TestChart v-if="isShow" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

import TestChart from '@/echarts/components/TestChart.vue'

const goPage = (item) => {
  uni.navigateTo({
    url: item.url
  })
}
const isShow = ref(false)
const changeShow = () => {
  isShow.value = !isShow.value
}

const list = [
  {
    name: '二维码测试',
    url: '/pages/qrcode-test'
  },
  {
    name: 'echarts',
    url: '/echarts/index'
  },
  {
    name: '分包echarts',
    url: '/pages/use-charts'
  }
]
</script>

<style lang="scss" scoped>

</style>
